<template>
  <div class="system-management">
    <div class="page-container">
      <div class="page-header">
        <h1>系统管理</h1>
        <p>系统配置和管理功能</p>
      </div>
      
      <div class="system-grid">
        <!-- 系统信息 -->
        <n-card title="系统信息" class="system-card">
          <n-descriptions label-placement="left" :column="1">
            <n-descriptions-item label="系统名称">Dragons Admin</n-descriptions-item>
            <n-descriptions-item label="系统版本">v1.0.0</n-descriptions-item>
            <n-descriptions-item label="运行环境">Production</n-descriptions-item>
            <n-descriptions-item label="数据库">MySQL 8.0</n-descriptions-item>
            <n-descriptions-item label="服务器">Linux Ubuntu 20.04</n-descriptions-item>
            <n-descriptions-item label="启动时间">2024-01-01 00:00:00</n-descriptions-item>
          </n-descriptions>
        </n-card>
        
        <!-- 系统配置 -->
        <n-card title="系统配置" class="system-card">
          <n-form label-placement="left">
            <n-form-item label="网站标题">
              <n-input v-model:value="config.siteTitle" />
            </n-form-item>
            <n-form-item label="网站描述">
              <n-input v-model:value="config.siteDescription" type="textarea" />
            </n-form-item>
            <n-form-item label="维护模式">
              <n-switch v-model:value="config.maintenanceMode" />
            </n-form-item>
            <n-form-item label="用户注册">
              <n-switch v-model:value="config.allowRegister" />
            </n-form-item>
            <n-form-item>
              <n-button type="primary" @click="saveConfig">保存配置</n-button>
            </n-form-item>
          </n-form>
        </n-card>
        
        <!-- 系统工具 -->
        <n-card title="系统工具" class="system-card">
          <div class="tool-buttons">
            <n-button type="info" @click="clearCache">
              <template #icon>
                <n-icon><RefreshOutline /></n-icon>
              </template>
              清除缓存
            </n-button>
            <n-button type="warning" @click="backupData">
              <template #icon>
                <n-icon><DownloadOutline /></n-icon>
              </template>
              数据备份
            </n-button>
            <n-button type="error" @click="restartSystem">
              <template #icon>
                <n-icon><PowerOutline /></n-icon>
              </template>
              重启系统
            </n-button>
          </div>
        </n-card>
        
        <!-- 系统日志 -->
        <n-card title="系统日志" class="system-card log-card">
          <n-log :log="systemLogs" :rows="15" />
        </n-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage, useDialog } from 'naive-ui'
import { RefreshOutline, DownloadOutline, PowerOutline } from '@vicons/ionicons5'

const message = useMessage()
const dialog = useDialog()

// 系统配置
const config = ref({
  siteTitle: 'Dragons Admin',
  siteDescription: 'Vue3+Vite+TypeScript+NaiveUI后台管理系统',
  maintenanceMode: false,
  allowRegister: true
})

// 系统日志
const systemLogs = ref(`[2024-01-15 10:30:00] INFO: 系统启动成功
[2024-01-15 10:31:00] INFO: 用户 admin 登录系统
[2024-01-15 10:32:00] INFO: 用户 admin 访问订单管理页面
[2024-01-15 10:33:00] INFO: 执行数据库查询操作
[2024-01-15 10:34:00] WARN: 检测到异常请求，已自动拦截
[2024-01-15 10:35:00] INFO: 系统缓存刷新完成
[2024-01-15 10:36:00] INFO: 用户 zhangsan 登录系统
[2024-01-15 10:37:00] ERROR: 数据库连接超时，正在重试
[2024-01-15 10:38:00] INFO: 数据库连接恢复正常
[2024-01-15 10:39:00] INFO: 定时任务执行完成
[2024-01-15 10:40:00] INFO: 系统性能监控正常`)

// 保存配置
const saveConfig = () => {
  message.success('配置保存成功！')
}

// 清除缓存
const clearCache = () => {
  dialog.warning({
    title: '确认操作',
    content: '确定要清除系统缓存吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      message.success('缓存清除成功！')
    }
  })
}

// 数据备份
const backupData = () => {
  dialog.info({
    title: '数据备份',
    content: '确定要进行数据备份吗？此操作可能需要几分钟时间。',
    positiveText: '开始备份',
    negativeText: '取消',
    onPositiveClick: () => {
      message.loading('正在备份数据...', {
        duration: 3000
      })
      setTimeout(() => {
        message.success('数据备份完成！')
      }, 3000)
    }
  })
}

// 重启系统
const restartSystem = () => {
  dialog.error({
    title: '危险操作',
    content: '确定要重启系统吗？这将导致所有用户断开连接。',
    positiveText: '确定重启',
    negativeText: '取消',
    onPositiveClick: () => {
      message.error('系统重启功能暂未开放！')
    }
  })
}
</script>

<style scoped>
.page-container {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
}

.system-card {
  height: fit-content;
}

.log-card {
  grid-column: span 2;
}

.tool-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-buttons .n-button {
  width: 100%;
}

@media (max-width: 768px) {
  .log-card {
    grid-column: span 1;
  }
}
</style> 